import React from "react";
import { Button, Select, Modal, Cascader, TreeSelect, Col, Row, Divider, Input, Collapse } from 'antd/lib';
import notification from "@/services/notification";
import { get } from "lodash";
import Uploads from "@/services/uploads";
import Upload from "antd/lib/upload";
import 'antd/dist/antd.less'
import WarningOutlined from "@ant-design/icons/WarningOutlined";
import { DeleteOutlined, UploadOutlined } from '@ant-design/icons';
import Customer from "@/services/customer";
import Enums from "@/services/enums";
import moment from "moment";
import DatePicker from "antd/lib/date-picker";
import locale from 'antd/es/date-picker/locale/zh_CN';
import { currentUser } from "@/services/auth";
import ContractApply from "@/services/contractapply";
import GlobalFunctions from '@/store/globalFunctions';
import { inject, observer } from 'mobx-react';
import { filter } from 'lodash';
import "./ContractTable.less";

const { confirm } = Modal;
const { Panel } = Collapse;

class empowerTab extends React.Component {
  state = {
    empowersexdata: [{ id: "男", name: "男" }, { id: "女", name: "女" }],
    agreementcountdata: [{ id: "壹", name: "壹" }, { id: "贰", name: "贰" }, { id: "叁", name: "叁" }, { id: "肆", name: "肆" }, { id: "伍", name: "伍" },
    { id: "陆", name: "陆" }, { id: "柒", name: "柒" }, { id: "捌", name: "捌" }, { id: "玖", name: "玖" }, { id: "拾", name: "拾" }],
  };

  fieldedit(field) {
    if (!this.props.contractStore.contractModel.isedit) {
      return true;
    }
    if (this.props.contractStore.contractModel.colcontrol) {
      if (this.props.contractStore.contractModel.allow_col.indexOf(field) >= 0) {
        return false;
      } else {
        return true;
      }
    } else {
      return false;
    }
  }
  render() {
    return (
      <div>
        <Collapse defaultActiveKey={['1', '2', '3']} >
          <Panel header="基本" key="1">
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div className="contractseditTitleStyle"><span style={{ color: '#f81d22', fontSize: 12 }}>*</span>委托人:</div></Col>
              <Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.empowerperson}
                onChange={e => this.props.contractStore.contractModel.setEmpowerperson(e.target.value)}
               disabled ={this.fieldedit("empowerperson")}
                placeholder="委托人"
              />
              </Col>
              <Col span={2}><div className="contractseditTitleStyle">性别:</div></Col>
              <Col span={6}>
                <Select style={{ width: "100%" }} value={this.props.contractStore.contractModel.empowersex}
                  onChange={value => this.props.contractStore.contractModel.setEmpowersex(value)}
                  disabled={this.fieldedit("empowersex")}>
                  {(this.state.empowersexdata || []).map(item => (
                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>
              <Col span={2}><div className="contractseditTitleStyle">职务:</div></Col>
              <Col span={6}>
              <Input
              style={{ width:  "100%" }}
                value={this.props.contractStore.contractModel.empowerduties}
                onChange={e => this.props.contractStore.contractModel.setEmpowerduties(e.target.value)}
               disabled ={this.fieldedit("empowerduties")}
                placeholder="职务"
              />
              </Col>
            </Row>
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div className="contractseditTitleStyle"><span style={{ color: '#f81d22', fontSize: 12 }}>*</span>协议份数:</div></Col>
              <Col span={6}>
                <Select style={{ width: "100%" }}
                  value={this.props.contractStore.contractModel.agreementcount}
                  showSearch
                  optionFilterProp="children"
                  onChange={value => this.props.contractStore.contractModel.setAgreementcount(value)}
                  disabled={this.fieldedit("agreementcount")}>
                  {(this.state.agreementcountdata || []).map(item => (
                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>
            </Row>
          </Panel>
        </Collapse>
      </div>
    );
  };
}

export default inject('contractStore')(observer(empowerTab));